/*
  学习目标：props两大特点
  1. 可以传递任意数据类型
*/

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
      <div>
        {/* 2.    */}
        {/* 3. JSX */}
        <Child
          //  1. 数字 字符串值 boolean  null  undefined
          name="ls"
          age={20}
          nu={null}
          un={undefined}
          isShow={true}
          // 数组
          list={[1, 2, 3]}
          // 对象
          person={{ gender: 1, hobby: 2 }}
          //  💥函数
          fn={() => alert(123)}
          // 💥JSX
          title={<i>我是斜着的title</i>}
        ></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    console.log('this.props  ----->  ', this.props);
    const { name, un, nu, isShow, list, person, fn, title } = this.props;

    return (
      <div>
        Child - {name}
        <button onClick={fn}>点我</button>
        <h3>{title}</h3>
        <h1>{un}</h1>
        <h1>{nu}</h1>
        <h1>{isShow}</h1>
        <h2>{JSON.stringify(person)}</h2>
        <ul>
          {list.map((item, index) => {
            return <li key={index}>{item}</li>;
          })}
        </ul>
      </div>
    );
  }
}
